/*
 * @Description: 生成离线备份
 * @Author: Zzt
 * @Date: 2022-08-18 11:50:34
 * @LastEditTime: 2022-08-19 09:36:16
 */

import { Button, Form, Input, Modal, Select } from 'antd';
import { useBackupListContext } from '../../contexts/BackupListContext';

const { Option } = Select;

const GenerateOffline = (props: any) => {
  const { discParameters, parameter } = useBackupListContext();
  const { onClose, visible } = props;
  const [form] = Form.useForm();

  const handleOk = () => {
    onClose();
  };

  const handleCancel = () => {
    onClose();
  };

  const submitFunc = () => {
    form.submit();
    onClose();
  };

  return (
    <>
      <Modal
        visible={visible}
        onOk={handleOk}
        width={600}
        onCancel={handleCancel}
        title="生成离线备份"
        footer={
          <>
            <Button
              onClick={() => {
                onClose();
              }}
            >
              取消
            </Button>
            <Button
              onClick={() => {
                submitFunc();
              }}
            >
              导出
            </Button>
          </>
        }
      >
        <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
          <Form.Item label="导出名称" rules={[{ required: true }]}>
            <Input placeholder="请填写离线生成的名称"></Input>
          </Form.Item>
          <Form.Item label="选择光盘容量" rules={[{ required: true }]}>
            <Select style={{ width: 252 }}>
              {discParameters.map((capacities: any) => (
                <Option key="id">
                  {capacities.capacity}
                  {capacities.company}光盘
                </Option>
              ))}
            </Select>
            <Button
              onClick={() => {
                parameter();
              }}
            >
              光盘容量配置
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
export default GenerateOffline;
